<template>
  <div class="kpi-card">
    <div class="kpi-title">活跃用户数</div>
    <div class="kpi-value">{{ activeUserCount }}</div>
    <div class="progress-bar">
      <div class="progress" :style="{ width: percent + '%', background: 'linear-gradient(90deg,#42b983,#409EFF)' }"></div>
    </div>
    <div class="kpi-desc">近7天运动≥3次用户量（目标{{ target }}人）</div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const target = 1000;
const activeUserCount = ref(Math.floor(Math.random()*target*0.9+target*0.1));
const percent = computed(() => Math.round(activeUserCount.value / target * 100));
</script>
<style scoped>
.kpi-card { background: #fff; border-radius: 12px; padding: 18px 8px; text-align: center; box-shadow: 0 2px 8px #f0f1f2; min-width: 180px; }
.kpi-title { font-size: 16px; color: #888; margin-bottom: 8px; }
.kpi-value { font-size: 32px; font-weight: bold; }
.progress-bar { width: 80%; height: 10px; background: #eee; border-radius: 5px; margin: 10px auto; }
.progress { height: 100%; border-radius: 5px; }
.kpi-desc { font-size: 13px; color: #bbb; margin-top: 6px; }
</style>